<template>
  <view class="container">
    <!-- 顶部用户信息卡片 -->
    <view class="user-card">
      <view class="nav-bar">
        <view class="left">
          <img class="back" @tap="goBack" src="@/static/返回箭头.png"></img>
        </view>
      </view>
      <view class="user-info">
        <view class="user-details">
          <text class="username">{{userInfo.username}}</text>
          <text class="level">Level {{userInfo.level}}</text>
        </view>
      </view>
      <view class="user-stats">
        <view class="stat-item">
          <text class="stat-value">{{userInfo.totalScore}}</text>
          <text class="stat-label">总分</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{userInfo.rank}}</text>
          <text class="stat-label">排名</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{userInfo.winRate}}%</text>
          <text class="stat-label">胜率</text>
        </view>
      </view>
    </view>

    <!-- 排行榜标签页 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ active: currentTab === index }"
        @tap="switchTab(index)"
      >
        <text>{{tab}}</text>
      </view>
    </view>

    <!-- 排行榜内容 -->
    <swiper class="swiper-content" :current="currentTab" @change="onSwiperChange">
      <!-- 全球排行榜 -->
      <swiper-item>
        <scroll-view scroll-y class="rank-list">
          <view 
            class="rank-item"
            v-for="(item, index) in globalRanking"
            :key="index"
            :class="{ 'highlight': item.isCurrentUser }"
          >
            <view class="rank-number" :class="{'top-three': index < 3}">
              {{index + 1}}
            </view>
            <image class="player-avatar" :src="item.avatar" mode="aspectFill"></image>
            <view class="player-info">
              <text class="player-name">{{item.username}}</text>
              <text class="player-level">Level {{item.level}}</text>
            </view>
            <view class="player-score">{{item.score}}</view>
          </view>
        </scroll-view>
      </swiper-item>


      <!-- 个人成就 -->
      <swiper-item>
        <scroll-view scroll-y class="achievements-list">
          <view class="achievement-section" v-for="(section, index) in achievements" :key="index">
            <text class="section-title">{{section.title}}</text>
            <view class="achievements-grid">
              <view 
                class="achievement-item"
                v-for="(achievement, idx) in section.items"
                :key="idx"
                :class="{ 'locked': !achievement.unlocked }"
              >
                <image class="achievement-icon" :src="achievement.icon" mode="aspectFit"></image>
                <text class="achievement-name">{{achievement.name}}</text>
                <text class="achievement-desc">{{achievement.description}}</text>
                <view class="achievement-progress" v-if="achievement.progress">
                  <view class="progress-bar">
                    <view 
                      class="progress-fill"
                      :style="{ width: (achievement.progress.current / achievement.progress.total * 100) + '%' }"
                    ></view>
                  </view>
                  <text class="progress-text">{{achievement.progress.current}}/{{achievement.progress.total}}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: ['全球排行', '个人成就'],
      userInfo: {
        username: '学习达人',
        level: 15,
        totalScore: 12800,
        rank: 128,
        winRate: 85,
        avatar: '/static/default-avatar.png'
      },
      globalRanking: [
        {
          username: '词汇王者',
          level: 30,
          score: 25600,
          avatar: '/static/avatar1.png',
          isCurrentUser: false
        },
        {
          username: '学习达人',
          level: 15,
          score: 12800,
          avatar: '/static/default-avatar.png',
          isCurrentUser: true
        },
        // ... 更多排名数据
      ],
      friendRanking: [
        {
          username: '好友1',
          level: 20,
          score: 15600,
          avatar: '/static/avatar2.png',
          isCurrentUser: false
        },
        // ... 更多好友排名数据
      ],
      achievements: [
        {
          title: '闯关成就',
          items: [
            {
              name: '初出茅庐',
              description: '完成第一次闯关',
              icon: '/static/achievements/first-win.png',
              unlocked: true,
              progress: {
                current: 0,
                total: 1
              }
            },
            {
              name: '连胜达人',
              description: '获得10连胜',
              icon: '/static/achievements/winning-streak.png',
              unlocked: true,
              progress: {
                current: 7,
                total: 10
              }
            },
            // ... 更多成就
          ]
        },
        {
          title: '学习成就',
          items: [
            {
              name: '词汇大师',
              description: '掌握1000个单词',
              icon: '/static/achievements/vocabulary.png',
              unlocked: false,
              progress: {
                current: 856,
                total: 1000
              }
            },
            // ... 更多成就
          ]
        }
      ]
    }
  },
  methods: {
    switchTab(index) {
      this.currentTab = index
    },
    onSwiperChange(e) {
      this.currentTab = e.detail.current
    },
    goBack() {
      uni.switchTab({url: '/pages/learn-mode/learn-mode'})
    },
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6f7ff 0%, #e9eeff 100%);
  padding: 30rpx;
}
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    align-items: center;
    gap: 20rpx;

    img {
      width: 40rpx;
      width: 40rpx;
    }

    .back {
      font-size: 40rpx;
    }

    .progress {
      font-size: 32rpx;
      color: #333;
    }
  }

  .right {
    display: flex;
    gap: 30rpx;

    .icon {
      font-size: 36rpx;
      color: #333;
    }
  }
}
.user-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      margin-right: 20rpx;
    }

    .user-details {
      .username {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }

      .level {
        font-size: 24rpx;
        color: #666;
        background: #f5f6fa;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
      }
    }
  }

  .user-stats {
    display: flex;
    justify-content: space-around;
    border-top: 2rpx solid #f5f6fa;
    padding-top: 30rpx;

    .stat-item {
      text-align: center;

      .stat-value {
        font-size: 40rpx;
        font-weight: bold;
        color: #2196F3;
        margin-bottom: 10rpx;
        display: block;
      }

      .stat-label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.tabs {
  display: flex;
  background: white;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  padding: 10rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
    transition: all 0.3s;

    &.active {
      color: #2196F3;
      font-weight: bold;

      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: #2196F3;
        border-radius: 2rpx;
      }
    }
  }
}

.swiper-content {
  height: calc(100vh - 400rpx);
}

.rank-list {
  height: 100%;
  padding: 20rpx;

  .rank-item {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 16rpx;
    padding: 40rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    &.highlight {
      background: #e3f2fd;
    }

    .rank-number {
      width: 60rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #666;
      text-align: center;

      &.top-three {
        color: #ff9800;
      }
    }

    .player-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin: 0 20rpx;
    }

    .player-info {
      flex: 1;

      .player-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 6rpx;
        display: block;
      }

      .player-level {
        font-size: 24rpx;
        color: #666;
      }
    }

    .player-score {
      font-size: 32rpx;
      font-weight: bold;
      color: #2196F3;
    }
  }
}

.achievements-list {
  height: 100%;
  padding: 20rpx;

  .achievement-section {
    margin-bottom: 40rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }

    .achievements-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;

      .achievement-item {
        background: white;
        border-radius: 16rpx;
        padding: 20rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

        &.locked {
          opacity: 0.6;
        }

        .achievement-icon {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 16rpx;
        }

        .achievement-name {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
          display: block;
        }

        .achievement-desc {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 16rpx;
          display: block;
        }

        .achievement-progress {
          .progress-bar {
            height: 10rpx;
            background: #f5f6fa;
            border-radius: 5rpx;
            margin-bottom: 10rpx;
            overflow: hidden;

            .progress-fill {
              height: 100%;
              background: #2196F3;
              transition: width 0.3s ease;
            }
          }

          .progress-text {
            font-size: 24rpx;
            color: #666;
            text-align: right;
            display: block;
          }
        }
      }
    }
  }
}
</style> 